<template>
    <!--    钩子函数与use函数-->
    <div class="hello">
        {{count}}
        <div>
            {{x}}
        </div>
        {{y}}
        <button @click="add">点击</button>
    </div>
</template>

<script>
    // import {ref} from 'vue';

    // import {ref, onMounted, onUpdated, onUnmounted} from 'vue';
    import {ref, onMounted,onUpdated, onUnmounted} from 'vue';
    export default {
        name: "hello",
        setup() {
            const count = ref(0);


            const add = (() => count.value++);
            const {x,y} = useMousePosition();
            useMounted();
            //
            //
            //
            function useMounted() {  //逻辑提取与复用
                onMounted(() => {
                    console.log('mounted');
                });
                onUpdated(() => {
                    console.log('update');
                });
                onUnmounted(() => {
                    console.log('unmounted');
                });
            }

            return {count, add, x, y};


        }
    };

    function useMousePosition() {
        const x = ref(0)
        const y = ref(0)

        function update(e) {
            x.value = e.pageX
            y.value = e.pageY
        }

        onMounted(() => {
            window.addEventListener('mousemove', update)
        })

        onUnmounted(() => {
            window.removeEventListener('mousemove', update)
        })

        return {x, y}
    }
</script>

<style scoped>

</style>
